﻿<!DOCTYPE html>
<html lang="en">
<head charset="utf-8">
  <title>TaskR</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Simple task management demo application powered by SignalR">
  <meta name="author" content="Andy May">
  <link href="Content/bootstrap.min.css" rel="stylesheet">
  <link href="Content/tasks.css" rel="stylesheet">  
</head>
<body>
  <div class="header-accent"></div>
  <div class="header">
    <h1 class="header-title">TaskR</h1>
  </div>
  <div class="task-actions">    
    <label class="checkbox inline">
      <input type="checkbox" name="showClosedTasks" value="showClosedTasks">
      Show Closed Tasks
    </label>
    <button class="btn" type="button" id="addTaskButton">Add a Task</button>
  </div>
  <div id="tasks" class="tasks">
    <ul class="unstyled" data-bind="foreach: tasks">
      <li>
        <div class="task" data-bind="attr: { id: TaskID }">
          <a href="#" class="btn editButton" data-bind="click: $root.EditTask"><i class="icon-pencil"></i>Edit</a>
          <h3 data-bind="text: Title"></h3>
          <div class="task-date">
            <span data-bind="text: DateCreated"></span>
          </div>
          <div class="task-status">
            <span data-bind="text: Status"></span>
          </div>
          <div class="task-assigned">
            <span>Assigned To:</span>
            <span data-bind="text: AssignedTo"></span>
          </div>
          <div class="task-details">
            <span data-bind="text: Details"></span>
          </div>          
        </div>
      </li>
    </ul>
  </div>
  <form class="modal fade" id="newTaskModal" data-bind="submit: AddTask">
    <div class="modal-header">
      <a class="close" data-dismiss="modal">x</a>
      <h3>New Task</h3>      
    </div>
    <div class="modal-body">
      <div>
        <label for="Title">Title:</label>
        <input type="text" data-bind="value: Title" />
      </div>
      <div>
        <label for="AssignedTo">Assigned To:</label>
        <input type="text" data-bind="value: AssignedTo" />
      </div>
      <div>
        <label for="Status">Status:</label>
        <select data-bind="value: Status">
          <option value="Open">Open</option>
          <option value="Closed">Closed</option>
          <option value="On Hold">On Hold</option>
        </select>
      </div>
      <div>
        <label for="Details">Details:</label>
        <textarea data-bind="value: Details"></textarea>
      </div>
    </div>
    <div class="modal-footer">
      <a href="#" class="btn cancel-button">Cancel</a>
      <input type="submit" class="btn btn-primary submit-button" value="Add Task" />
    </div>
  </form>
  <form class="modal fade" id="editTaskModal" data-bind="submit: UpdateTask">
    <div class="modal-header">
      <a class="close" data-dismiss="modal">x</a>
      <h3>Edit Task</h3>      
    </div>
    <div class="modal-body">
      <div>
        <label for="Title">Title:</label>
        <input type="text" data-bind="value: Title" />
      </div>
      <div>
        <label for="AssignedTo">Assigned To:</label>
        <input type="text" data-bind="value: AssignedTo" />
      </div>
      <div>
        <label for="Status">Status:</label>
        <select data-bind="value: Status">
          <option value="Open" label="Open" />
          <option value="Closed" label="Closed" />
          <option value="On Hold" label="On Hold" />
        </select>
      </div>
      <div>
        <label for="Details">Details:</label>
        <textarea data-bind="value: Details"></textarea>
      </div>
    </div>
    <div class="modal-footer">
      <a href="#" class="btn cancel-button">Cancel</a>
      <input type="submit" class="btn btn-primary submit-button" value="Update Task" />
    </div>
  </form>
  <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
  <script src="Scripts/bootstrap.min.js" type="text/javascript"></script>
  <script src="Scripts/jquery.signalR.min.js" type="text/javascript"></script>
  <script src="signalr/hubs" type="text/javascript"></script>
  <script src="Scripts/knockout.js" type="text/javascript"></script>
  <script src="Scripts/knockout.mapping-latest.js" type="text/javascript"></script>
  <script src="Scripts/tasks.js" type="text/javascript"></script>
  <script src="Scripts/tasks.ui.js" type="text/javascript"></script>
</body>
</html>
